<script setup>
const multipleTableRef = ref()

// 表头类型
const props = defineProps({
  tableHeader: {
    type: Array,
    required: true,
  },
  tableData: {
    type: Array,
    required: true,
  },
  rows: {
    type: Array,
    default: () => [],
  },
  total: {
    type: Number,
    default: 20,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  pageSizes: {
    type: Array,
  },
  layout: {
    type: String,
    default: 'prev, pager, next, slot, sizes, jumper',
  },
  maxHeight: {
    type: String,
  },
  height: {
    type: String,
  },
  noPage: {
    type: Boolean,
  },
  isSort: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
  },
  showTooltip: {
    type: Boolean,
    default: true,
  },
  isSelection: {
    type: Boolean,
    default: false,
  },
  isRadio: {
    type: Boolean,
  },
  selectFn: {
    type: Function,
    default: () => true,
  },
  selectRows: {
    type: Array,
  },
  radioParam: {
    type: String,
    default: 'id',
  },
  cellHeight: {
    type: String,
    default: '0.2196rem',
  },
})

const initData = ref()
watch(
  () => props.tableData,
  () => {
    initData.value = props.isRadio
      ? props.tableData.map((item) => ({
          ...item,
          check: false,
        }))
      : props.tableData
  },
  {
    immediate: true,
  }
)

watch(
  () => props.selectRows,
  () => {
    if (props.selectRows?.length) {
      props.selectRows.forEach((row) => {
        multipleTableRef.value.toggleRowSelection(row, undefined)
      })
    } else {
      multipleTableRef.value.clearSelection()
    }
  }
)

// 分页
let page = ref(1)
let size = ref(10)

// 分页页数或者每页条数改变向子组件传递函数
const emits = defineEmits(['changeSize', 'changePage', 'changeSelection', 'changeRadio'])

// 选择框勾选
const handleSelectionChange = (selection, row) => {
  emits('changeSelection', selection, row)
}

// 每页条数改变
const handleSizeChange = (val) => {
  emits('changeSize', val)
}

// 页数改变
const handleCurrentChange = (val) => {
  emits('changePage', val)
}

const columnEdit = ref(false)
const handleEditShow = (val) => {
  columnEdit.value = true
}

const handleEditHide = (val) => {
  columnEdit.value = false
}

const clearSelection = ref()
watchEffect(() => {
  page.value = props.currentPage
  size.value = props.pageSize
})

const clearSelectionFn = () => {
  multipleTableRef.value.clearSelection()
}

// 计算下标
const computedIndex = (val) => {
  return (page.value - 1) * size.value + val + 1
}

// 单选
const selection = ref()
const changeRadio = (row) => {
  multipleTableRef.value.setCurrentRow(row)
  selection.value = !row.check ? row : null
  initData.value = initData.value.map((item) => {
    if (item[props.radioParam] !== row[props.radioParam]) {
      item.check = false
    } else {
      item.check = !row.check
    }
    return item
  })
  emits('changeRadio', row)
}

defineExpose({
  clearSelectionFn,
})
</script>

<template>
  <div class="table-container" ref="qtTable">
    <!-- 表格 -->
    <el-table
      ref="multipleTableRef"
      :data="initData"
      style="width: 100%"
      class="el-table"
      :row-key="(row) => row.id"
      :show-overflow-tooltip="showTooltip"
      :cell-style="{ height: cellHeight }"
      @selection-change="handleSelectionChange"
      :max-height="maxHeight"
      :height="height"
      @cell-mouse-enter="handleEditShow"
      @cell-mouse-leave="handleEditHide"
    >
      <el-table-column
        v-if="isSelection"
        type="selection"
        :selectable="selectFn"
        :reserve-selection="true"
        align="center"
        width="40"
      />
      <el-table-column width="55" v-if="isRadio">
        <template #default="{ row }">
          <el-checkbox
            v-model="row.check"
            class="radio-checkbox"
            @click.prevent.stop="changeRadio(row)"
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column v-if="isSort" label="序号" type="index" align="center" width="120">
        <!-- 单元格插槽 -->
        <template #default="scope">
          <span>{{ computedIndex(scope.$index) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :type="item.type"
        :prop="item.prop"
        :label="item.label"
        :align="item.align"
        :min-width="item.minWidth"
        :width="item.width"
        v-for="item in tableHeader"
        :fixed="item.fixed"
        :show-overflow-tooltip="item.showOverflowTooltip"
      >
        <!-- 表头插槽 -->
        <template #header="scope">
          <slot
            :name="item.prop ? item.prop + '-header' : 'default'"
            :column="scope.column"
            v-if="item.isHeadSlot"
          ></slot>
          <div v-else>
            {{ item.label }}
            <el-icon v-if="false">
              <Edit />
            </el-icon>
          </div>
        </template>

        <!-- 单元格插槽 -->
        <template #default="scope">
          <slot
            :name="item.prop ? item.prop : 'default'"
            :row="scope.row"
            :value="scope.row[item.prop]"
            v-if="item.isSlot"
          ></slot>
          <div class="table-cell-content" v-else-if="!item.type">
            {{ scope.row[item.prop] }}
            <el-icon v-if="false">
              <Edit />
            </el-icon>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container" v-show="!noPage" ref="qtTablePage">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="size"
        :page-sizes="pageSizes"
        background
        size="large"
        popper-class="e"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <div class="pagination-total-info">
        共<span class="pagination-total-number">{{ total }}</span
        >条数据
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

:deep() {
  .el-table__header-wrapper .el-table-column--selection > .cell,
  .el-table__body-wrapper .el-table-column--selection > .cell {
    justify-content: center;
  }

  /*表格样式修改*/
  .el-table {
    background-color: transparent !important;

    // 行下线和hover背景色
    --el-table-border-color: transparent !important;
    --el-table-row-hover-bg-color: #90939922;

    .cell {
      text-align: left;
    }
    // 表头
    th.is-leaf {
      background: #909399;
      .cell {
        font-size: 14px;
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: bold;
        color: #303133;
      }
    }
    .el-table__header-wrapper {
      // border-radius: 10px;
    }

    // 表格内容
    .el-table__row {
      position: relative;
      box-sizing: border-box;
      background-color: #eeeeee;
      // 表格内容cell
      td {
        z-index: 2;
        font-size: 14px;
        font-weight: 400 !important;
        border-bottom: 1px solid #909399;
        color: #303133;
        // 左上和左下圆角（第一个单元格）
        &:first-child {
          // border-radius: 10px 0 0 10px;
        }

        // 右上和右下圆角（最后一个单元格）
        &:last-child {
          // border-radius: 0 10px 10px 0px;
        }
        .cell {
        }
      }
      &::after {
      }
    }

    .el-table-column--selection {
      .cell {
        padding: 0;
        padding-left: 24px;
        &.el-tooltip {
          min-width: auto;
        }
      }
      .el-checkbox__input:not(.is-checked) .el-checkbox__inner {
        background-color: transparent;
        border-color: #909399;
      }
    }
  }

  // 分页
  .pagination-arrow {
    i {
      color: #909399;
    }
    &:hover {
      border-color: #409eff;
      background-color: #f5f7fa;
    }
  }
  .el-pagination {
    border-radius: 8px;

    .el-pager li,
    button {
      font-size: 16px;
      color: #909399;
      border: 1px solid #dcdfe6;
      background-color: #ffffff;
      &:not(.is-active):hover {
        border-color: #409eff;
        background-color: #f5f7fa;
      }
      .el-icon {
        font-size: 16px;
      }
    }
    .el-pagination__jump,
    .el-pagination__total {
      color: #606266;
    }
    .el-select {
      width: 120px;
    }
    .el-pagination__sizes,
    .el-pagination__jump {
      margin-left: 24px;
    }

    /* 覆盖element-plus的CSS变量 */
    --el-pagination-border-radius: 8px;
    --el-pagination-button-bg-color: #ffffff;
  }
}
</style>
